<template>
  <div class="login">
    <div class="login-container">
      <div class="login-box">
        <div class="login-header">
          <img src="../../assets/image/logo.png" class="logo-image">
          <span>旅游信息推荐系统</span>
        </div>
        <div class="login-form">
          <el-form 
            :model="registerForm" 
            :rules="rules" 
            ref="registerForm" 
            label-position="top"
            @submit.native.prevent>
            
            <el-form-item prop="loginAccount">
              <el-input 
                prefix-icon="el-icon-user" 
                v-model="registerForm.loginAccount" 
                placeholder="请输入登录账号"
                class="login-input">
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input 
                prefix-icon="el-icon-star-off" 
                type="password" 
                v-model="registerForm.password" 
                placeholder="请输入密码"
                class="login-input"
                show-password>
              </el-input>
            </el-form-item>

            <el-form-item prop="confirmPassword">
              <el-input 
                prefix-icon="el-icon-star-off" 
                type="password" 
                v-model="registerForm.confirmPassword" 
                placeholder="请确认密码"
                class="login-input"
                show-password>
              </el-input>
            </el-form-item>

            <el-form-item prop="userName">
              <el-input 
                prefix-icon="el-icon-s-platform" 
                v-model="registerForm.userName" 
                placeholder="请输入用户名"
                class="login-input">
              </el-input>
            </el-form-item>

            <el-form-item prop="email">
              <el-input 
                prefix-icon="el-icon-message" 
                v-model="registerForm.email" 
                placeholder="请输入邮箱"
                class="login-input">
              </el-input>
            </el-form-item>

            <el-form-item prop="tel">
              <el-input 
                prefix-icon="el-icon-phone" 
                v-model="registerForm.tel" 
                placeholder="请输入手机号"
                maxlength="11"
                class="login-input">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button class="register-button primary-button" type="primary" @click="submitForm('registerForm')">注 册</el-button>
              <el-button class="login-button secondary-button" @click="toLogin">返回登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {saveUser} from '../../api/api'
  export default {
    data() {
      // 验证密码强度
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'));
        } else if (value.length < 6) {
          callback(new Error('密码长度不能小于6位'));
        } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(value)) {
          callback(new Error('密码必须包含大小写字母和数字'));
        } else {
          if (this.registerForm.confirmPassword !== '') {
            this.$refs.registerForm.validateField('confirmPassword');
          }
          callback();
        }
      };

      // 验证确认密码
      const validateConfirmPassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      };

      // 验证手机号
      const validatePhone = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入手机号'));
        } else if (!/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的11位手机号'));
        } else {
          callback();
        }
      };

      // 验证邮箱
      const validateEmail = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入邮箱'));
        } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
          callback(new Error('请输入正确的邮箱格式'));
        } else {
          callback();
        }
      };

      return {
        registerForm: {
          loginAccount: '',
          password: '',
          confirmPassword: '',
          userName: '',
          email: '',
          tel: '',
        },
        rules: {
          loginAccount: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, validator: validatePassword, trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, validator: validateConfirmPassword, trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, validator: validateEmail, trigger: 'blur' }
          ],
          tel: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      toLogin() {
        this.$router.push("/login")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const param = {
              loginAccount: this.registerForm.loginAccount,
              password: this.registerForm.password,
              userName: this.registerForm.userName,
              email: this.registerForm.email,
              tel: this.registerForm.tel,
              userType: 1,
              avatar: '/image/logo.png'
            }
            
            saveUser(param).then(res => {
              if (res.code == 1000) {
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
                setTimeout(() => {
                  this.$router.push("/login")
                }, 500)
              } else {
                this.$message({
                  message: res.message,
                  type: 'warning'
                });
              }
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/image\ 2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.1) contrast(1.1);
  z-index: -2;
}

.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 222, 198, 0.2) 50%,
    rgba(255, 183, 143, 0.1) 100%);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.login-box {
  width: 400px;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 35px;
}

.logo-image {
  width: 70px;
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.login-header span {
  display: block;
  color: #d37136;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.login-form {
  margin-top: 20px;
}

.login-input {
  height: 45px;
}

.login-input :deep(.el-input__inner) {
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
  border: 1px solid rgba(211, 113, 54, 0.2);
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.login-input :deep(.el-input__inner:focus) {
  border-color: #d37136;
  box-shadow: 0 0 0 2px rgba(211, 113, 54, 0.1);
}

.primary-button, .secondary-button {
  width: 100%;
  height: 45px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.primary-button {
  background: linear-gradient(135deg, #d37136, #ff8c42);
  border: none;
  color: white;
}

.primary-button:hover {
  background: linear-gradient(135deg, #ff8c42, #d37136);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 113, 54, 0.2);
}

.secondary-button {
  background: transparent;
  border: 2px solid #d37136;
  color: #d37136;
}

.secondary-button:hover {
  background: rgba(211, 113, 54, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 113, 54, 0.1);
}

/* 添加一些新的样式 */
.el-form-item {
  margin-bottom: 20px;
}

:deep(.el-form-item__error) {
  padding-top: 4px;
  font-size: 12px;
}

:deep(.el-input__inner) {
  padding-left: 40px !important;
}

:deep(.el-input__prefix) {
  left: 10px;
  color: #d37136;
}

/* 响应式调整 */
@media screen and (max-width: 480px) {
  .login-box {
    width: 90%;
    padding: 30px 20px;
  }
  
  .login-header span {
    font-size: 22px;
  }
  
  .login-input {
    height: 40px;
  }
  
  .login-input :deep(.el-input__inner) {
    height: 40px;
    line-height: 40px;
  }
  
  .primary-button, .secondary-button {
    height: 40px;
    font-size: 15px;
  }
}
</style>
